
<div class="flex items-center gap-2">
  <div class="relative inline-flex w-max items-center border font-sans font-medium rounded-md text-sm p-0.5 bg-stone-800/10 border-transparent text-stone-800 shadow-none">
    <span class="font-sans text-current leading-none my-1 mx-2.5">Ghost</span>
  </div>
  <div class="relative inline-flex w-max items-center border font-sans font-medium rounded-md text-sm p-0.5 shadow-sm bg-transparent border-stone-800 text-stone-800">
    <span class="font-sans text-current leading-none my-1 mx-2.5">Outline</span>
  </div>
  <div class="relative inline-flex w-max items-center border font-sans font-medium rounded-md text-sm p-0.5 shadow-sm bg-stone-500 border-stone-500 text-stone-50">
    <span class="font-sans text-current leading-none my-1 mx-2.5">Solid</span>
  </div>
  <div class="relative inline-flex w-max items-center border font-sans font-medium rounded-md text-sm p-0.5 shadow-sm bg-gradient-to-tr from-primary-dark to-primary-light border-stone-800 text-stone-50">
    <span class="font-sans text-current leading-none my-1 mx-2.5">Gradient</span>
  </div>
</div>
